<template>
  <div class="zoom-container" ref="zoomContainer">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useWindowSizeFn } from '@/hooks/core/useWindowSizeFn'
const props = defineProps({
  width: {
    type: Number,
    default: 1920
  },
  height: {
    type: Number,
    default: 929
  },
  auto: {
    type: Boolean,
    default: true
  },
  contentDom: {
    type: String,
    value: ''
  }
})

const calculateZoom = (
  designWidth: number = props.width,
  designHeight: number = props.height,
  renderDom: any = props.contentDom
) => {
  let clientHeight = document.documentElement.clientHeight
  let clientWidth = document.documentElement.clientWidth
  let rDom = document.querySelector(renderDom)
  if (rDom === null) return
  rDom.style.height = `${designHeight}px`
  rDom.style.width = `${designWidth}px`
  rDom.style.transformOrigin = '0 0'

  // 原始方案
  let scale = clientWidth / clientHeight < designWidth / designHeight ? clientWidth / designWidth : clientHeight / designHeight
  rDom.style.height = `${clientHeight / scale}px`
  rDom.style.width = `${clientWidth / scale}px`
  rDom.style.transform = `scale(${scale})`

  // 不算完善的替代方案
  // let cH = window.screen.height - window.screen.availHeight
  // rDom.style.transform = `scale(${clientWidth / designWidth}, ${clientHeight / designHeight})`
}

const calScale = () => {
  const designWidth = props.width
  const designHeight = props.height
  const renderDom = props.contentDom
  calculateZoom(designWidth, designHeight, renderDom)
}

useWindowSizeFn(calScale, 150, {
  immediate: true
})

onMounted(() => {
  props.auto && calScale()
})
</script>
